<template>
  <div class="container" style="display: inline-block">
    <!-- Form -->
    <el-dialog title="修改宠物信息" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="宠物名称">
          <el-input v-model="formInline.petName"></el-input>
        </el-form-item>
        <el-form-item label="宠物品种">
          <el-input v-model="formInline.petSpecies"></el-input>
        </el-form-item>
        <el-form-item label="宠物类型">
          <el-input v-model="formInline.petType"></el-input>
        </el-form-item>
        <el-form-item label="宠物年龄">
          <el-input v-model="formInline.petAge"></el-input>
        </el-form-item>
        <el-form-item label="已被领养">
          <el-select v-model="formInline.isAdopt">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
    data() {
      return {
        dialogFormVisible: false,
        formInline: {
          petId: 0,
          petName: '',
          petSpecies: '',
          petType: '',
          petAge: 0,
          isAdopt: 0
        }
      }
    },
    methods: {
      onSubmit() {
        this.$axios.post("pet/updateByPetId",{
          petId: this.formInline.petId,
          petName: this.formInline.petName,
          petSpecies: this.formInline.petSpecies,
          petType: this.formInline.petType,
          petAge: this.formInline.petAge,
          isAdopt: this.formInline.isAdopt
        })
        .then((result) => {
          // alert(result.data)
          if(result.data == 1){
            this.dialogFormVisible = false
            location.reload();
          }
        }).catch((err) => {
          alert(err)
        });

      },
      showDialogForm(data) {
        // console.log(data)
        this.initFormInline(data);
        this.dialogFormVisible = true;
      },
      initFormInline(newData){
        let newForm = {
          petId: newData.petId,
          petName: newData.petName,
          petSpecies: newData.petSpecies,
          petType: newData.petType,
          petAge: newData.petAge,
          isAdopt: newData.isAdopt
        }
        this.formInline = newForm;
        // console.log(this.formInline)
      }
  }
} 
</script>
<style >
.demo-form-inline{
  padding: 0px 20px;
}
.el-input, .el-select {
  width: 250px;
}

</style>